<template>
	<view class="logins">
		<nav-bar isBack title="我的收藏"></nav-bar>
		<view class="s_cTabs">
			<view class="s_ctItem" v-for="(item, index) in carTypes" :class="{ active: current == index }" :data-current="index" @tap="tabChange">
				{{ item.name }}
				<text></text>
			</view>
		</view>
		<view class="s_cCan">
			<swiper class="s_cSwiper" @change="swiperChange" :current="current">
				<!-- 商品 -->
				<swiper-item class="s_cSwiper-item">
					<scroll-view class="s_dList" scroll-y @scrolltolower="nextPage">
						<view class="l_cgItem" v-for="(item, index) in goodsList" :key="index" @click="natos(item)">
							<view class="l_cgImage"><image :src="item.main_imgurl"></image></view>
							<view class="l_cgCont">
								<view class="l_cgName omit-2">{{ item.product_title }}</view>
								<view class="l_cgTags"><view class="l_cgTag"></view></view>
								<view class="l_cgPrice">
									<!-- <text class="l_cgCost">￥<text>{{item.primary_price}}</text></text> -->
									<text class="l_cgFee">
										￥
										<text>{{ item.price }}</text>
									</text>
									<view class="yprice" v-if="item.rate_price">
										<i>底价</i>
										￥
										<text>{{ item.rate_price }}</text>
									</view>
								</view>
								<view class="icond iconfont iconhuaban161"></view>
							</view>
						</view>
						<view class="nolist" v-if="goodsList == ''">
							<image src="https://manager.ryz1620.com/static/my/suess.png"></image>
							<text>暂无数据</text>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 案例 -->
				<swiper-item class="s_cSwiper-item">
					<scroll-view class="s_dList" scroll-y @scrolltolower="shopPage">
						<view class="l_cgItem" v-for="(item, index) in demoList" :key="index" @tap="toDetail(item.id)">
							<view class="l_cgImage">
								<image :src="item.thumb_url[0].path"></image>
								<view class="i_tBtn" @tap.stop="dviewr(item.display_url)" v-if="item.display_url">
									<view class="i_tbImg"><image src="@/static/home/3d.png"></image></view>
									<view class="i_tbTxt">3D</view>
								</view>
							</view>
							<view class="l_cgCont">
								<view class="l_cgName omit-2">{{ item.title }}</view>
								<view class="l_cgTags"><view class="l_cgTag"></view></view>
								<view class="l_cg">
									<text class="l_cgF">
										<text>{{ item.house_type }}</text>
									</text>
								</view>
								<view class="icond iconfont iconhuaban161"></view>
							</view>
						</view>
						<view class="nolist" v-if="demoList == ''">
							<image src="https://manager.ryz1620.com/static/my/suess.png"></image>
							<text>暂无数据</text>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 动态 -->
				<swiper-item class="s_cSwiper-item">
					<scroll-view class="s_dList" scroll-y @scrolltolower="themePage">
						<view class="p_dDyna">
							<view v-for="(items, index) in themeList" :key="index" style="padding: 10rpx 25rpx; padding-top: 25rpx;" @click="toTarnd(items.id)">
								<view class="p_ddItem">
									<view class="p_ddTags">
										<view v-for="item in items.tags">
											<view class="p_ddTag">
												<view class="p_ddTag-icon"><image src="/static/common/icon_topic.png"></image></view>
												<text>{{ item }}</text>
											</view>
										</view>
									</view>
									<view class="p_ddCont">
										<view class="p_ddText">
											<view>
												<view>{{ items.title }}</view>
											</view>
										</view>
										<view class="p_ddImgs">
											<view v-for="item in items.media" v-if="items.type == 0" :key="item.id" @tap.stop="preview(index, items.media)">
												<view class="p_ddImg"><image :src="item.path"></image></view>
											</view>
											<view v-for="item in items.media" v-if="items.type == 1" :key="item.id">
												<view class="p_ddImg"><video style="width: 205rpx;height: 205rpx;" id="myVideo" :src="item.path" controls></video></view>
											</view>
										</view>
									</view>
									<view class="p_funs">
										<view class="p_fun">
											<view class="p_fIcon iconfont icon-transpond"></view>
											<text>{{ items.forward_num }}</text>
										</view>
										<view class="p_fun">
											<view class="p_fIcon iconfont icon-comments"></view>
											<text>{{ items.comment_num }}</text>
										</view>
										<view class="p_fun">
											<view class="p_fIcon" v-if="items.support_status == 0"><image src="/static/common/icon_collection.png"></image></view>
											<view class="p_fIcon" v-else><image src="/static/common/icon_collection2.png"></image></view>
											<text>{{ items.support_num }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="nolist" v-if="themeList == ''">
							<image src="https://manager.ryz1620.com/static/my/suess.png"></image>
							<text>暂无数据</text>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 话题 -->
				<swiper-item class="s_cSwiper-item">
					<scroll-view class="s_dList" scroll-y @scrolltolower="titPage">
						<view class="i-dcont" v-for="(item, index) in titList" :key="index">
							<view class="i-img"><image :src="item.logo.path"></image></view>
							<view class="i-tit">
								<text class="text1">{{ item.name }}</text>
								<text class="text2">{{ item.desc }}</text>
							</view>
							<view class="i-mk">已收藏</view>
						</view>
						<view class="nolist" v-if="titList == ''">
							<image src="https://manager.ryz1620.com/static/my/suess.png"></image>
							<text>暂无数据</text>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import navBar from '@/components/navBar/navBar.vue';
import service_my from '@/service/my.js';
import service_mall from '@/service/mall.js';
import service_oneN from '@/service/oneN.js';
import URL from '@/config/url.js';

export default {
	components: { navBar },

	data() {
		return {
			baseImg: 'http://manager.ryz1620.com',
			carTypes: [
				{
					name: '商品'
				},
				{
					name: '案例'
				},
				{
					name: '动态'
				},
				{
					name: '话题'
				}
			],
			current: 0,
			goodsList: [],
			goodspage: 1,
			demoList: [],
			demoListpage: 1,
			themeList: [],
			themepage: 1,
			titList: [],
			titpage: 1
		};
	},
	onLoad() {
		this.$utils.getUrl()
		this.getList();
		this.getdemoListpageList();
		this.getthemepageList();
		this.getttitList();
	},
	methods: {
		navto(url) {
			uni.navigateTo({
				url
			});
		},
		dviewr(item) {
			let url = encodeURIComponent(item);
			uni.navigateTo({
				url: '/pages_3D/pages/3D/panorama?url=' + url
			});
		},
		toTarnd(id) {
			uni.navigateTo({ url: '/pages_design/pages/design/dynamic/dynamic?trendId=' + id });
		},
		toDetail(caseId) {
			uni.navigateTo({ url: '/pages_design/pages/design/demo/demo?caseId=' + caseId });
		},
		natos(item) {
			uni.navigateTo({
				url: '/pages_mall/pages/mall/goods_details/goods_details?id=' + item.product_id
			});
		},
		tabChange(e) {
			var index = e.target.dataset.current || e.currentTarget.dataset.current;
			this.current = index;
		},
		swiperChange(e) {
			var index = e.target.current || e.detail.current;
			this.current = index;
		},
		nextPage() {
			this.goodspage++;
			this.getList();
		},
		getList() {
			uni.showLoading()
			service_my
				.getshoplist({
					page: this.goodspage
				})
				.then(res => {
					uni.hideLoading()
					let data = res.data.data;
					for (let i = 0; i < data.length; i++) {
						this.goodsList.push(data[i]);
					}
				})
				.catch(err => {
					uni.hideLoading()
				});
		},
		shopPage() {
			this.demoListpage++;
			this.getdemoListpageList();
		},
		getdemoListpageList() {
			uni.showLoading()
			service_my
				.getDesignCaset({
					page: this.demoListpage
				})
				.then(res => {
					uni.hideLoading()
					let data = res.data;
					for (let i = 0; i < data.length; i++) {
						this.demoList.push(data[i]);
					}
				})
				.catch(err => {
					uni.hideLoading()
				});
		},
		// 预览图片
		preview(index, urls) {
			let img_url = [];
			for (let i = 0; i < urls.length; i++) {
				img_url.push(urls[i].path);
			}
			uni.previewImage({
				urls: img_url,
				current: index,
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		},
		themePage() {
			this.themepage++;
			this.getthemepageList();
		},
		getthemepageList() {
			uni.showLoading()
			service_my
				.getCollectList({
					page: this.themepage
				})
				.then(res => {
					uni.hideLoading()
					let data = res.data;
					for (let i = 0; i < data.length; i++) {
						this.themeList.push(data[i]);
					}
				})
				.catch(err => {
					uni.hideLoading()
				});
		},
		titPage() {
			this.titpage++;
			this.getttitList();
		},
		getttitList() {
			uni.showLoading()
			service_my
				.getCommunity({
					page: this.titpage
				})
				.then(res => {
					uni.hideLoading()
					let data = res.data;
					for (let i = 0; i < data.length; i++) {
						this.titList.push(data[i]);
					}
				})
				.catch(err => {
					uni.hideLoading()
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.logins {
	width: 100vw;
	height: 100vh;
	background: #fff;
	display: flex;
	flex-flow: column;
}
.s_cTabs {
	height: 100rpx;
	position: relative;
	display: flex;
	z-index: 500;
	background: #fff;
	.s_ctItem {
		font-size: 30rpx;
		color: #939393;
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 1;
		&.active {
			font-weight: bold;
			position: relative;
			color: #303030;
			text {
				width: 40rpx;
				height: 6rpx;
				border-radius: 4rpx 4rpx;
				background: #ffd425;
				position: absolute;
				bottom: 0;
				left: 50%;
				margin-left: -20rpx;
				z-index: 1;
			}
		}
	}
	.s_ctCursor {
		width: 40rpx;
		height: 8rpx;
		border-radius: 4rpx 4rpx;
		background: #ffd425;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
		transform: translateX(166rpx);
	}
}
.s_cCan {
	height: 100%;
}
.estateItem {
	padding: 40rpx 30rpx;
	position: relative;
	width: 100%;
	height: 270rpx;
	display: flex;
	border-bottom: 2rpx solid #f4f4f4;

	.itemImg {
		overflow: hidden;
		width: 224rpx;
		height: 188rpx;
		margin-right: 24rpx;
		border-radius: 4rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 4rpx;
		}
	}

	.itemInfo {
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.infoTitle {
			width: 434rpx;
			font: 600 28rpx/48rpx PingFang SC;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.infoTime {
			font: 400 24rpx/40rpx PingFang SC;
			color: #333333;
		}

		span {
			font: 400 24rpx/48rpx PingFang SC;
			color: #ff615d;
		}
	}
}
.i-dcont {
	padding: 30rpx;
	min-height: 104rpx;
	padding-left: 150rpx;
	position: relative;
	.i-img {
		width: 104rpx;
		height: 104rpx;
		position: absolute;
		left: 30rpx;
		top: 30rpx;
		border-radius: 50%;
		background: #f9f9f9;
		overflow: hidden;
	}
	.i-tit {
		line-height: 52rpx;
		padding-right: 140rpx;
		text {
			display: block;
		}
		.text1 {
			font-size: 32rpx;
			color: #333333;
		}
		.text2 {
			font-size: 24rpx;
			color: #939393;
		}
	}
	.i-mk {
		position: absolute;
		right: 30rpx;
		top: 54rpx;
		height: 56rpx;
		line-height: 56rpx;
		padding: 0 25rpx;
		border-radius: 30rpx;
		border: 1px #ccc solid;
		color: #939393;
	}
}
.itemInfo .i-mk {
	position: absolute;
	right: 30rpx;
	top: 40rpx;
	height: 56rpx;
	line-height: 56rpx;
	padding: 0 25rpx;
	border-radius: 30rpx;
	border: 1px #ccc solid;
	color: #939393;
}
.nolist {
	margin-top: 200rpx;
	line-height: 80rpx;
	text-align: center;
	color: #939393;
}
.nolist image {
	display: block;
	width: 288rpx;
	height: 232rpx;
	margin: auto;
}
.s_dList {
	height: 100%;
	padding-bottom: 30rpx;
}
.i_cList {
	padding: 0 32rpx;
	display: flex;
}
.i_cLeft {
	flex: 1;
}
.i_cLeft:first-child {
	padding-right: 12rpx;
}
.i_cLeft:last-child {
	padding-left: 12rpx;
}
.i_cRight {
	flex: 1;
}
.i_cItem {
	width: 100%;
	padding-bottom: 38rpx;
	border-radius: 8rpx;
	overflow: hidden;
}
.i_cImage {
	width: 100%;
	background: #f6f7fb;
	> image {
		height: 360rpx;
	}
}
.i_cTag {
	height: 44rpx;
	line-height: 44rpx;
	color: #a58f6d;
	font-size: 20rpx;
	padding: 0 16rpx 0 48rpx;
	margin: 16rpx 16rpx 0;
	border-radius: 22rpx;
	background: #f9f6f3;
	position: relative;
	display: inline-block;
	.i_ctIcon {
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		top: 4rpx;
		left: 4rpx;
	}
}
.i_cText {
	line-height: 36rpx;
	font-size: 24rpx;
	margin: 16rpx 20rpx 0;
}
.i_cUser {
	margin: 16rpx 16rpx 0;
}
.i_cHead {
	width: 36rpx;
	height: 36rpx;
	margin-right: 8rpx;
	border-radius: 50%;
	background: #f6f7fb;
	float: left;
	overflow: hidden;
}
.i_cPraise {
	height: 36rpx;
	color: #939393;
	font-size: 20rpx;
	float: right;
	display: flex;
	align-items: center;
}
.i_cpIcon {
	width: 32rpx;
	height: 32rpx;
	margin: 0 8rpx;
}
.i_cName {
	height: 36rpx;
	line-height: 36rpx;
	color: #939393;
	font-size: 20rpx;
	overflow: hidden;
}
// 装修案例
.l_dDemo {
	padding: 28rpx 0 40rpx;
	.l_ddItem {
		padding: 42rpx 0 40rpx;
		&:nth-child(1) {
			padding-top: 0;
		}
	}
	.l_ddBanner {
		height: 376rpx;
		margin: 0 32rpx;
		border-radius: 8rpx;
		background: #f0f0f0;
		overflow: hidden;
		position: relative;
	}
	.l_ddInfo {
		line-height: 34rpx;
		font-size: 24rpx;
		margin: 18rpx 32rpx 0;
	}
	.l_ddTag {
		height: 36rpx;
		line-height: 36rpx;
		color: #a98f68;
		font-size: 20rpx;
		padding: 0 20rpx;
		margin-top: -2rpx;
		margin-right: 16rpx;
		border-radius: 18rpx;
		background: #f9f6f3;
		float: left;
	}
	.l_ddCont {
		overflow: hidden;
	}
	.l_ddVal {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.l_ddCutLine {
		width: 1px;
		height: 12rpx;
		margin: 0 8rpx;
		background: #333;
		display: inline-block;
		&:nth-last-child(1) {
			display: none;
		}
	}
	.l_ddRemark {
		line-height: 44rpx;
		font-size: 32rpx;
		font-weight: bold;
		padding-left: 36rpx;
		margin-top: 8rpx;
	}
}
.l_cgItem {
	height: 180rpx;
	margin: 32rpx 32rpx 0;
	background: #fff;
	overflow: hidden;
	position: relative;
}
.l_cgImage {
	width: 180rpx;
	height: 180rpx;
	float: left;
	position: relative;
}
.l_cgCont {
	padding-left: 20rpx;
	overflow: hidden;
}
.l_cgName {
	min-height: 80rpx;
	line-height: 40rpx;
}
.l_cgTags {
	height: 32rpx;
	margin-top: 14rpx;
	display: flex;
}
.l_cgTag {
	height: 32rpx;
	line-height: 32rpx;
	font-size: 22rpx;
	color: #939393;
	padding-right: 24rpx;
	position: relative;
	&::after {
		content: '';
		width: 1px;
		height: 14rpx;
		background: #939393;
		position: absolute;
		top: 50%;
		right: 12rpx;
		transform: translateY(-50%) scaleX(0.5);
	}
	&:last-child::after {
		content: none;
	}
}
.l_cgPrice {
}
.l_cgFee {
	color: #c3ab7c;
	font-size: 34rpx;
	font-weight: normal;
	padding-left: 4rpx;
	display: block;
	text-align: left;
	& > text {
		font-size: 32rpx;
	}
}
.l_cgCost {
	text-decoration: line-through;
	color: #939393;
	font-size: 14rpx;
	& > text {
		font-size: 18rpx;
	}
}
.l_cgSell {
	height: 32rpx;
	line-height: 32rpx;
	color: #939393;
	font-size: 22rpx;
	margin-top: 10rpx;
}
.icond {
	display: block;
	width: 60rpx;
	height: 60rpx;
	position: absolute;
	right: 0;
	background: #f8f8f8;
	border-radius: 50%;
	bottom: 0;
	text-align: center;
	line-height: 60rpx;
}
.l_cg {
	line-height: 40rpx;
	overflow: hidden;
	.l_cgF {
		color: #999;
	}
}
// 设计动态
.p_dDyna {
	overflow: hidden;
	.p_ddItem {
		box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.15);
		border-radius: 15rpx;
		overflow: hidden;
	}
	// 用户信息
	.p_ddUser {
		padding: 0 32rpx;
	}
	.p_ddHead {
		width: 84rpx;
		height: 84rpx;
		margin-right: 20rpx;
		border-radius: 50%;
		background: #f0f0f0;
		overflow: hidden;
		float: left;
	}
	.p_ddCan {
		padding-top: 6rpx;
		overflow: hidden;
	}
	.p_ddName {
		height: 40rpx;
		line-height: 40rpx;
		font-weight: bold;
	}
	.p_ddTime {
		height: 34rpx;
		line-height: 34rpx;
		color: #939393;
		font-size: 24rpx;
	}
	// 标签
	.p_ddTags {
		margin: 18rpx 32rpx 0;
		overflow: hidden;
	}
	.p_ddTag {
		height: 44rpx;
		line-height: 44rpx;
		color: #a58f6d;
		font-size: 24rpx;
		padding: 0 20rpx 0 48rpx;
		border-radius: 22rpx;
		background: #f9f6f3;
		position: relative;
		float: left;
	}
	.p_ddTag-icon {
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		top: 4rpx;
		left: 4rpx;
	}
	// 内容
	.p_ddText {
		line-height: 44rpx;
		margin: 28rpx 36rpx 0;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}
	.p_ddAll {
		height: 36rpx;
		line-height: 36rpx;
		color: #a98f68;
		font-size: 26rpx;
		margin-top: 8rpx;
		position: relative;
	}
	.p_ddAll-click {
		width: 140rpx;
		height: 70rpx;
		position: absolute;
		top: -18rpx;
		left: -36rpx;
	}
	.p_ddImgs {
		padding: 18rpx 0 0 32rpx;
		overflow: hidden;
	}
	.p_ddImg {
		width: 205rpx;
		height: 205rpx;
		margin: 12rpx 14rpx 0 0;
		border-radius: 4rpx;
		background: #f0f0f0;
		overflow: hidden;
		float: left;
	}
	// 底部功能键
	.p_funs {
		padding: 20rpx 32rpx 22rpx;
		display: flex;
	}
	.p_fun {
		height: 74rpx;
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
		&:nth-child(1) {
			justify-content: flex-start;
		}
		&:nth-last-child(1) {
			justify-content: flex-end;
		}
	}
	.p_fIcon {
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		color: #6c6c6c;
		font-size: 40rpx;
		margin-right: 16rpx;
		display: inline-block;
	}
}
.i_tBtn {
	width: 70rpx;
	height: 70rpx;
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid #fff;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}
.i_tbImg {
	width: 22rpx;
	height: 22rpx;
	margin: 15rpx auto 0;
}
.i_tbTxt {
	width: 100%;
	height: 24rpx;
	line-height: 24rpx;
	text-align: center;
	color: #fff;
	font-size: 18rpx;
	position: absolute;
	top: 38rpx;
	left: 0;
}
</style>
